<template>
	<view :class='["tabbar",device == "ios"?"ios_safe":"","dFlex","jAround_aCenter"]'>
		<view :class="['tabOne','dFlex','flexDirection','jCenter_aCenter',actIdx == index?'active':'']"
			v-for="(item,index) in list" :key='index' @tap.stop='switchPage(item.pagePath)'>
			<view class='tabImg imgPublic'>
				<image v-if='actIdx != index' :src='item.iconPath' mode='widthFix'></image>
				<image v-if='actIdx == index' :src='item.selectedIconPath' mode='widthFix'></image>
			</view>
			<text>{{item.text}}</text>
			<view class="showCount" v-if="qCount>0 && identity == '2' && item.text == '抢单'">{{qCount}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: {
			actIdx: {
				default: 0,
			},
			identity: {
				default: uni.getStorageSync('identify')?uni.getStorageSync('identify'):'1', // 1用户 2工作人员
			},
			qCount:{
				default: 0,
			}
		},
		
		data() {
			return {
				device: getApp().globalData.platform,
				list: [],
				tab1: [{
						"pagePath": "/pages/home",
						"iconPath": "/static/images/menu1.png",
						"selectedIconPath": "/static/images/menu1_1.png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/kind",
						"iconPath": "/static/images/menu2.png",
						"selectedIconPath": "/static/images/menu2_1.png",
						"text": "分类"
					},
					{
						"pagePath": "/pages/shop",
						"iconPath": "/static/images/menu7.png",
						"selectedIconPath": "/static/images/menu7_1.png",
						"text": "商城"
					},
					{
						"pagePath": "/pages/car",
						"iconPath": "/static/images/menu3.png",
						"selectedIconPath": "/static/images/menu3_1.png",
						"text": "购物车"
					},
					{
						"pagePath": "/pages/person",
						"iconPath": "/static/images/menu4.png",
						"selectedIconPath": "/static/images/menu4_1.png",
						"text": "我的"
					}
				],
				tab2: [{
						"pagePath": "/pages/staging",
						"iconPath": "/static/images/menu5.png",
						"selectedIconPath": "/static/images/menu5_1.png",
						"text": "工作台"
					},
					{
						"pagePath": "/pages/seizeOrder",
						"iconPath": "/static/images/menu6.png",
						"selectedIconPath": "/static/images/menu6_1.png",
						"text": "抢单"
					},
					{
						"pagePath": "/pages/person",
						"iconPath": "/static/images/menu4.png",
						"selectedIconPath": "/static/images/menu4_1.png",
						"text": "我的"
					}
				]
			};
		},
		methods: {
			// 页面跳转
			switchPage(url) {
				uni.switchTab({
					url: url,
				})
			},
			init(){
				this.list = this.identity == '1'?this.tab1:this.tab2;
			}
		},
		watch: {
			identity: {
				handler(newValue, oldValue) {
					this.list = this.identity == '1' ? this.tab1 : this.tab2;
					/* if((newValue && oldValue) && newValue != oldValue && this.identity == '2'){
						this.actIdx = 2;
					} */
				},
				immediate: true
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		width: 100%;
		height: 50px;
		// box-sizing:border-box;
		background: white;
		border-top: 1px solid #cecece;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;

		.tabOne {
			flex: 1;
			color: #666666;
			font-size: 12px;
			position: relative;
			.showCount{
				width: 18px;
				height: 18px;
				background: red;
				border-radius: 50%;
				color: white;
				text-align: center;
				line-height: 18px;
				font-size: 12px;
				position: absolute;
				top: -4px;
				right:28%;
			}
			.tabImg {
				width: 22px;
				height: 22px;
				margin-bottom: 2px;
			}
		}

		.active {
			color: #1664FF;
		}
	}
</style>